E-commerce and Accessibility - Creating an inclusive online shopping experience

August 23, 2023

Now more than ever, more people are shopping online. And why shouldn’t we? It’s available 24/7, you can easily compare prices and often get better deals, and you can have virtually everything delivered to your door-step. The problem is: it might not be such a walk in the park for everyone. Have you thought how someone who’s blind can order take out food online? Or how someone who can’t use a mouse buys a new coffee machine?

People with disabilities often find barriers when navigating e-commerce stores, and shopping online almost becomes an impossible mission. That’s because most retailers don’t even consider this type of users, and are completely unaware that their websites are not accessible.

What they’re also not aware of is that by not having an accessible website, they’re missing out a significant portion of their potential target market. 15% of the world’s population lives with some kind of disability. That’s actually millions of people who are potential customers, with millions in purchasing power. And it’s not only about profit. Accessibility compliance has recently become a legal obligation.

Now it’s the time for online stores to improve their website accessibility and ensure they offer an inclusive experience for everyone.

What’s accessibility in online shopping?

Web accessibility is about creating websites, apps and web tools that can be used by everyone regardless of their ability. It’s about allowing everyone, including people with disabilities, to perceive, understand, navigate and interact with the internet.

When designing accessible websites, it’s important to be aware that many people with disabilities rely on software and hardware solutions — assistive technology — to understand and navigate the Web. Screen readers, for example, are used by people who are blind to listen to the content of a page. Users with physical impairments might use head pointers or motion tracking. Users with low vision use magnification software to zoom the elements on a web page. 

In e-commerce, an accessible website means people are able to complete a purchase —  from searching and selecting the product they wish to buy, adding it to cart, going through the checkout and payment process and getting the right customer support throughout the whole process. For that to happen, websites and apps need to be designed and coded properly to meet the accessibility requirements set by the World Wide Web Consortium (W3C) through its Web Content Accessibility Guidelines (WCAG).

To better understand accessibility in e-commerce, let’s go through some of the issues people with disabilities might experience in each step of the online shopping process.

Product Search and Selection

Buying a product using only the keyboard

People who are blind or who have limited used of their hands may not be able to use a mouse to navigate a website. Instead they rely on the keyboard to move between links, buttons, forms and other controls. When pressing the Tab key, all elements should be operable and there should be a visual indication of focus, which is often invisible.

The Continente website, if you’re a new user trying to register you cannot access the “Registo” tab with your keyboard. That means it’s inaccessible for someone who can only navigate using the keyboard.

Having images of products without a description

If you add a written description to product photos, people who use screen readers will be able to listen to the content of the image.

In Prozis homepage, there’s a section where offers are presented as images. Someone who’s sighted can clearly see the 15% discount offer and take advantage of it. However, someone who’s blind and is accessing the website using a screen reader will hardly be able to use the offer. When they’re navigating through that image the screen reader will read “pt pt campanha 60107”, which is the image description (<alt text>).

Not everyone sees your page in colour

There’re a number of products sold in multiple colours. Someone who’s blind or colour blind will have a hard time selecting the colour in which they wish to buy the product if the colour is not included in the description or the image alt text.

If someone who’s blind or colour blind is browsing Continente’s website for an electric car for their kid, they might face some problems knowing the colour of certain products.

In the example above, we see a simulation of how someone who has a total colour blindness sees the product page. Nowhere in the description or the characteristics it says which colour the Twinkle car is.

Also, someone using a screen reader won’t be able to know the colour as not even the image description mentions anything regarding the colour — alt=“Twinkle Car com Rádio Controlo 12v”.

Checkout and Payment

Abandoned carts are the nightmare of every online store. When talking about users with disabilities, one of the main reasons for them to drop out might be accessibility barriers. 

Even if they can search for products and add them to cart without much effort, an unaccessible checkout process will dictate the success both for the user and the business. And there’s a lot that can go wrong during checkout if the website is not designed and coded properly — from missing form labels, to requiring too much input or having limited payment options. 

Making sure your checkout process is fully accessible is the key to successful purchases (and more revenue). 

Filling in the checkout form

If the form is incomplete or submitted with some error, adding a red border to the form field is not enough. People with colour blindness or who have some other visual disability won’t be able to understand it. Instead, adding text to indicate the error and a symbol will make it accessible for colour blinded users, and screen readers will be able to read out the problem.

Auchan website is a good example of how errors in forms should be displayed. Although they use the red contour around the form field to mark the error, they also include the text “This field is mandatory”.

Effortless payments

Payment is an important part of the checkout process and it should be designed to require the minimum amount of input. This can be done by allowing customers to save their information or use payment methods like Google Pay, Apple Pay and Paypal.

Giving users enough time

For security reasons, checkout often has a time limit. However, this can be a problem for people who take longer to read, type text or interact with the interface, and they might end up not being able to place an order. To overcome this, when the time limit is approaching there can be a message warning users and giving them the option to extend the time.

Indicating checkout progress

Checkout is usually a multi-step process. Generally, it looks like: cart > account > shipping > payment. Someone with an attention disability who tends to get easily distracted might struggle to pick up where they left off if there isn’t any indication of where they are in the buying process. To avoid this, you can provide breadcrumbs that indicate the step the user is in, the steps they already completed and the ones pending.

Post-Purchase

Informed customer support

Besides providing support through different channels — live chat, email, phone — to accommodate the needs of people with different needs, customer support should be trained to provide assistance to customers with different disabilities. If a user who’s blind reaches out saying they’re having trouble using your website with JAWS, support staff should at least know that it’s a widely used screen reader.

In Portugal, brands like Vodafone, MEO or e-Redes already provide customer support in Portuguese Sign Language.

Wake up to the business case of accessibility 

Photo by Tima Miroshnichenko from Pexels

More online customers means more revenue

Designing a website or app that follows accessibility standards will potentially translate into more revenue and market growth. 

The global market of people with disabilities is over 1 billion. Besides people with disabilities, population is rapidly aging and more people acquire some form of disability, originating an increased demand for easier and more accessible websites.

In the UK, people with disabilities and their families are recognised as a key target audience, and their purchasing power is referred to as the “purple pound”. A study revealed that the online spending power of people with access needs in the UK is £24.8 billion (The Click-Away Pound Report 2019). When considering the global market the number escalates to more than $6 trillion (Source: W3C).

It’s definitely time for more businesses worldwide to start considering the purple pound, dollar or euro and acknowledge the commercial opportunity for business.

Accessibility is a legal obligation

The same way a physical store has to comply with regulations on disability accessibility which include, for example, ramps and wide walkways for people using a wheelchair, an online store also has a set of requirements they need to comply with.

In many countries, like the US or the UK, having an accessible website is required by law. In the European Union (EU), the European Accessibility Act (EAA) has recently set the accessibility requirements for the products and services that are most important for people with disabilities. Among them is, of course, e-commerce services. 

EU countries must comply with the Act from June 2025.

Happy customers return and advocate for you

Photo by Thirdman from Pexels

If people with disabilities can’t use a store’s website they’ll easily turn to a competitor who offers a similar product or service.

Moreover, when customers are loyal to a brand they keep on repeating purchases and share their positive experience with friends and family. When shopping online, 83% of disabled users stick to websites that they know are barrier-free. (The Click-Away Pound Report 2019)

. . .

Besides the need to be legally compliant, an inclusive e-commerce website is not only easier to use by people with disabilities, it also provides a better the experience to all customers. Ultimately, increasing their satisfaction. By offering an accessible website companies will prove their commitment to break barriers and create a web that’s accessible to everyone.